<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>juicer.js模板引擎的使用-内联函数</title>
        <script src="js/juicer-min.js"></script>
    </head>
    <body>
        <h1>juicer.js模板引擎的使用</h1>
        <div id="content"></div>
        <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script id="tpl" type="text/template">
            <ul>
                {@each list as it,index}
                    <li>${it.name} (index: ${index})</li>
                {@/each}
                
            </ul>
            <ul></ul>
            {@each blah as it}
                <li>
                    num: ${it.num|numberPlus} <br />
                    {@if it.num==3}
                        {@each it.inner as it2}
                            ${it2.time} <br />
                        {@/each}
                    {@/if}
                </li>
            {@/each}
            <ul>
                {@each i in range(5, 10)}
                    <li>
                        {# 输出 5;6;7;8;9;}
                        ${i};
                    </li>
                {@/each}
            </ul>
            {@helper numberPlus}
                function(number) {
                    return number + 1;
                }
            {@/helper}
        </script>
        <script>
            var tpl = document.getElementById("tpl").innerHTML;
            var data = {
                list: [
                    {name:' guokai', show: true},
                    {name:' benben', show: false},
                    {name:' dierbaby', show: true}
                ],
                blah: [
                    {num: 1},
                    {num: 2},
                    {num: 3, inner:[
                        {'time': '15:00'},
                        {'time': '16:00'},
                        {'time': '17:00'},
                        {'time': '18:00'}
                    ]},
                    {num: 4}
                ]
            };
            var html=juicer(tpl,data);
            console.log('html',html);
            $("#content").html(html);
        </script>
    </body>
</html>